<template>
	<view class="updatePage">
		<view class="" v-if="title === '催款备注'">
			<view class="title">
				设置{{title}}
			</view>
			<view class="">
				<textarea
					style="border: 1px solid #E5E5E5;border-radius: 10rpx;padding: 25rpx 0 22rpx 20rpx;font-size: 28rpx;height: 180px;width:98%;"
					placeholder-style="font-size:30rpx" placeholder="请在此进行输入催款备注" v-model="valueCui" />
			</view>
		</view>
		<view v-else-if="title === '票据信息'" class="" style="">
			<view class="title">
				设置{{title}}
			</view>
			<view class="">
				<view class="" style="font-weight: bold;">
					票据抬头
				</view>
				<view class="">
					<textarea
						style="border: 1px solid #E5E5E5;border-radius: 10rpx;padding: 25rpx 0 22rpx 20rpx;font-size: 28rpx;margin-top: 30rpx;height: 80px;width:98%;"
						placeholder-style="font-size:30rpx" placeholder="请在此进行输入票据抬头" v-model="valueTou" />
				</view>

				<view class="" style="font-weight: bold; margin-top: 100rpx;">
					票据备注
				</view>
				<view class="">
					<textarea
						style="border: 1px solid #E5E5E5;border-radius: 10rpx;padding: 25rpx 0 22rpx 20rpx;font-size: 28rpx;margin-top: 30rpx;height: 80px;width:98%;"
						placeholder-style="font-size:30rpx" placeholder="请在此进行输入票据备注" v-model="valueBei" />
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="title">
				设置{{title}}
			</view>
			<view class="inputBorder" style="border: none;">
				<!-- <uni-easyinput :disabled="true"  style="border: none;" :type="type" :placeholder="'请输入'+title" v-model="UserPhone"></uni-easyinput> -->
				<uni-easyinput v-if="title==='账户名称'" style="border: none;flex:1;margin-top:20rpx" :type="type"
					:placeholder="'请输入新'+title" v-model="USERINFO.UserName"></uni-easyinput>
				<uni-easyinput v-if="title==='手机号'" style="border: none;flex:1;margin-top:20rpx" :type="type"
					:placeholder="'请输入新'+title" v-model="USERINFO.UserPhone" :disabled="disabled"></uni-easyinput>
				<view v-if="title==='手机号'"
					style="display: flex;justify-content: space-between;margin-top:20rpx;align-items: center;">
					<uni-easyinput :disabled="disabled" style="border: none;flex:1" :type="type" placeholder="请输入验证码"
						v-model="code"></uni-easyinput>
					<button :disabled="disabled" size="mini" style="height: 40px;line-height: 40px;margin-left:20rpx"
						type="primary" @click="codeChange">{{!codeTime?'获取验证码':codeTime+'s后重发'}}</button>
				</view>
			</view>
		</view>




		<!-- 	<view v-else>
			<uni-easyinput v-model="value" :type="type" placeholder="请在此进行输入" placeholder-style="font-size:30rpx" ></uni-easyinput>
		</view> -->
		<view class="fixView"> </view>
		<view class="fixBtn">
			<button @click="finsh" type="primary" :disabled="disabled">完成</button>
		</view>
	</view>
</template>

<script>
	const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	export default {
		data() {
			return {
				// 是否禁止按钮
				disabled: false,
				// 催款备注
				valueCui: "",
				// 票据抬头
				valueTou: '',
				// 票据备注
				valueBei: '',
				// 旧手机号
				UserPhone: "",
				// 新手机号
				Phone: "",
				code: "",
				codeTime: 0,
				type: '',
				title: '',
				key: '',
				userName: '',
				userPhone: '',
				// 用户信息
				USERINFO: {}
			}
		},
		onLoad(options) {
			console.log('获取哪个类型过来的rul', options, this.USERINFO);
			this.UserPhone = options.value
			this.type = options.type
			this.title = options.title
			this.key = options.key
			this.Phone = options.value
			console.log('标题', this.title)
			// if(this.title === '手机号'){
			// 	this.Phone = options.value
			// }else if(this.title === '账户名称'){
			// 	t
			// }
			// 票据抬头和票据备注赋值
			this.valueTou = uni.getStorageSync('webviewTitle')
			this.valueBei = uni.getStorageSync('ReceiptPhrase')
			// 催款备注
			this.valueCui = uni.getStorageSync('callForPayRemart')
			// 获取用户详情
			this.getTheData()
		},
		methods: {
			getTheData() {
				let id = uni.getStorageSync('userInfo').Id
				this.$http('post', '/Base_Manage/Base_User/GetTheData', {
						id: id
					})
					.then((res) => {
						if (res.Success) {
							console.log('获取用户详情信息', res)
							if (res.Data) this.USERINFO = res.Data
						} else {
							uni.showToast({
								title: res.Msg,
								icon: "none"
							})
						}
					})
			},


			codeChange() {

				if (this.Phone === "") return this.$api.msg('请输入新手机号')
				// if(this.code === "") return this.$api.msg('请输入验证码')

				console.log('手机号', this.UserPhone, this.Phone)
				uni.showLoading({
					title: '发送中'
				})
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				}
				this.$http('post', '/BO/CustomerinfoMerchant/ReplacePhone?UserPhone=' + this.UserPhone + '&Phone=' + this
					.Phone).then(res => {
					if (res.Success) {
						uni.hideLoading()
						// this.op()
						uni.showToast({
							icon: 'none',
							title: '已发送'
						})
						this.codeTime = 60
						let timer = setInterval(() => {
							this.codeTime--;
							if (this.codeTime < 1) {
								clearInterval(timer);
								this.codeTime = 0
							}
						}, 1000)

						// this.back()
					} else {
						this.$api.msg(res.Msg)
						// 禁用按钮
						this.disabled = true
					}
				})
			},
			back() {
				uni.navigateBack({})
			},
			// 完成
			finsh() {
				var that = this
				if (this.title == '催款备注') {
					this.$api.msg('设置成功')
					uni.setStorageSync('callForPayRemart', this.valueCui)
					setTimeout(function() {
						that.back()
					}, 2000)

					return
				}
				if (this.title == '票据信息') {
					this.$api.msg('设置成功')
					if (this.valueTou) {
						uni.setStorageSync('webviewTitle', this.valueTou)

					}
					if (this.valueBei) {
						uni.setStorageSync('ReceiptPhrase', this.valueBei)
					}
					setTimeout(function() {
						that.back()
					}, 2000)
					return
				}

				let userInfo = uni.getStorageSync('userInfo')
				if (this.key == 'UserName') userInfo.UserName = this.value
				userInfo[this.key] = this.value

				if (this.title === '手机号') {
					// 修改手机号
					this.ConfirmPhone()
				} else if (this.title === '账户名称') {
					// 修改账户名称
					this.ConfirmRealName()
				}


			},

			// 修改账户名称
			ConfirmRealName() {
				uni.showLoading({
					title: '修改中'
				})
				var that = this
				this.$http('post', '/Base_Manage/Base_User/SaveData', this.USERINFO)
					.then((res) => {
						if (res.Success) {
							uni.showToast({
								title: '已修改'
							})
							setTimeout(function() {
								uni.hideLoading()
							}, 1000)
							this.updateInfo()
						} else {
							this.$api.msg(res.Msg)
						}
					})
			},
			// 重新更新用户信息
			updateInfo() {
				this.$http('post', '/Base_Manage/Home/GetOperatorInfo').then(res => {
					if (res.Success) {
						console.log('获取用户信息edituserInfo', res.Data)
						this.USERINFO = res.Data.UserInfo
						uni.setStorageSync('userInfo', res.Data.UserInfo)
						uni.navigateBack({})
					}
				})
			},

			ConfirmPhone() {
				if (this.Phone === "") return this.$api.msg('请输入新手机号')
				if (this.code === "") return this.$api.msg('请输入验证码')
				this.loading = true
				var that = this
				uni.showLoading({
					title: '变更中'
				})
				this.$http('post', '/BO/CustomerinfoMerchant/ConfirmPhone?SmsCode=' + this.code + '&UserPhone=' + this
					.UserPhone + '&Phone=' + this.Phone).then(res => {
					if (res.Success) {
						// this.op()
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '手机号已变更，请重新登录'
						})
						this.loading = false
						setTimeout(function() {
							// 跳转回登录页面
							that.logOut()
						}, 1000)

					} else {
						this.loading = false
						this.$api.msg(res.Msg)
					}
				})
			},
			logOut() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('pass')
				uni.removeStorageSync('agree')
				uni.reLaunch({
					url: '/pages/Login/Login'
				})
			},
			// saveData(userInfo){
			// 	console.log(userInfo);
			// 	this.$http('post', '/Base_Manage/Base_User/SaveData', userInfo).then(res => {     
			// 		if (res.Success) {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: '保存成功'
			// 			})
			// 			uni.setStorageSync('userInfo', userInfo)
			// 			this.back()
			// 		}
			// 	})
			// },
			// back() {
			// 	setTimeout(() => {
			// 		uni.navigateBack()
			// 	}, 1000)
			// }
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep.uni-easyinput__content-input {
		height: 40px;
	}

	.updatePage {
		box-sizing: border-box;
		height: 100vh;
		padding: 30px;
		background-color: #fff;

		.title {
			font-weight: 500;
			font-size: 24px;
			text-align: center;
			margin-bottom: 10vh;
		}

		.inputBorder {
			height: 40px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}

		.finsh {
			position: absolute;
			bottom: 100px;
			left: 30px;
			width: calc(100% - 60px);
		}
	}
</style>